<!--
 * @Author: windys
 * @Description: 直播发言
 * @Date: 2022-02-16 10:35:03
-->
<template>
  <div class="say_container">
    <input v-model="txt" type="text" />
    <van-button size="small" round type="primary" @click="handleSend"
      >发送</van-button
    >
    <img src="@/assets/img/gift.png" alt="" srcset="" @click="handleSendGift" />
  </div>
</template>


<script >
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup(props, { emit }) {
    const txt = ref("");
    const handleSend = () => {
      if (txt.value) {
        emit("handleSend", txt.value);
        setTimeout(()=>{
          txt.value = null
        },100)
      }
    };
    const handleSendGift = () => {
      emit("handleSendGift");
    };
    return {
      txt,
      handleSend,
      handleSendGift,
    };
  },
});
</script>


<style lang="scss" scoped>
.say_container {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #010e3660;
  display: flex;
  justify-items: center;
  justify-content: center;
  input {
    height: 30px;
    width: 220px;
    margin: auto;
    border-radius: 50px;
    outline: none;
    border: none;
    color: #000;
    font-size: 12px;
    padding: 0 10px;
  }
  button {
    margin: auto;
    width: 60px;
  }
  img {
    margin: auto;
    width: 35px;
    height: 35px;
  }
}
</style>
